<template>
  <div class="home">
    <img
      src="@/assets/images/home/left.png"
      alt=""
      @click="toggleBoxL"
      class="imgLeft"
    />
    <img
      src="@/assets/images/home/left-jt.png"
      alt=""
      @click="toggleBoxL"
      class="imgLeft2"
      :class="{ rotate: isRotated }"
    />
    <img
      src="@/assets/images/home/Right.png"
      alt=""
      @click="toggleBoxR"
      class="imgRight"
    />
    <img
      src="@/assets/images/home/Right-jt.png"
      alt=""
      @click="toggleBoxR"
      class="imgRight2"
      :class="{ rotate: isRotated2 }"
    />
    <!-- 项目概况 -->
    <projectDetail v-bind:class="{ hiddenLeft: isHiddenL }"></projectDetail>
    <!-- 吨入炉垃圾发电趋势 -->
    <powerGenerationTrend
      v-bind:class="{ hiddenLeft: isHiddenL }"
    ></powerGenerationTrend>
    <!-- 入炉垃圾量 -->
    <totalGarbage v-bind:class="{ hiddenLeft: isHiddenL }"></totalGarbage>
    <!-- 环境监测 -->
    <environmentalMonitoring
      v-bind:class="{ hiddenRight: isHiddenR }"
    ></environmentalMonitoring>
    <!-- 发电量趋势 -->
    <electrical v-bind:class="{ hiddenRight: isHiddenR }"></electrical>
    <!-- 综合厂用电量趋势 -->
    <electricityConsumption
      v-bind:class="{ hiddenRight: isHiddenR }"
    ></electricityConsumption>
    <!-- 上网静电量趋势 -->
    <staticElectricity
      v-bind:class="{ hiddenRight: isHiddenR }"
    ></staticElectricity>
  </div>
</template>

<script setup lang="ts">
import projectDetail from "./components/projectDetail.vue";
import powerGenerationTrend from "./components/powerGenerationTrend.vue";
import totalGarbage from "./components/totalGarbage.vue";
import environmentalMonitoring from "./components/environmentalMonitoring.vue";
import electrical from "./components/electrical.vue";
import electricityConsumption from "./components/electricityConsumption.vue";
import staticElectricity from "./components/staticElectricity.vue";
import { get_token } from "@/utils/token";

const uevi1 = () => {
  var cam = window.BlackHole3D.Camera.getCamLocate(); //获取当前相机方位
  var forceCamLoc = new window.BlackHole3D.REForceCamLoc();
  forceCamLoc.force = true;
  forceCamLoc.camPos = cam.camPos;
  forceCamLoc.camDir = cam.camDir;
  window.BlackHole3D.Camera.setCamForcedInitLoc(forceCamLoc);
};
const uevi2 = () => {
  var Init = window.BlackHole3D.Camera.getCamForcedInitLoc();
  console.log("Init", Init);

  alert(
    "相机位置（三元数）" +
      Init.camPos +
      "\n" +
      "相机的朝向（四元数）" +
      Init.camRotate +
      "\n" +
      "相机的朝向（欧拉角）" +
      Init.camDir
  );
};
const uevi3 = () => {
  var camLoc = new window.BlackHole3D.RECamLoc();
  camLoc.camPos = [1.0245197145794336, 148.7957925058299, 65.35735767857165];
  camLoc.camRotate = [
    -0.0806883308839443, 0.6309357605209067, 0.7653941630766403,
    -0.09788378049134393,
  ];
  var locDelay = 0.5;
  var locTime = 1;
  window.BlackHole3D.Camera.setCamLocateTo(camLoc, locDelay, locTime);
};
// 监听模型加载进度
function REDataSetLoadProgress(e: any) {
  if (e.detail.progress === 100) {
    console.log("监听");
    setTimeout(() => {
      uevi3();
    }, 200);
  } else {
  }
}
onMounted(() => {
  console.log("window.BlackHole3D", window.BlackHole3D);
  get_token();
  document.addEventListener("REDataSetLoadProgress", (e) =>
    REDataSetLoadProgress(e)
  ); //模型加载进度监听
});
onUnmounted(() => {
  document.removeEventListener("REDataSetLoadProgress", REDataSetLoadProgress); //移除 模型加载进度监听
});
// uevi3()
const isHiddenL = ref(false);
const isHiddenR = ref(false);
const isRotated = ref(false);
const isRotated2 = ref(false);

const toggleBoxL = () => {
  isHiddenL.value = !isHiddenL.value;
  isRotated.value = !isRotated.value;
  console.log("@@");
};
const toggleBoxR = () => {
  isHiddenR.value = !isHiddenR.value;
  isRotated2.value = !isRotated2.value;
  console.log("@@");
};
</script>

<style lang="scss" scoped>
.home {
  .uevi1 {
    position: absolute;
    width: 100px;
    height: 20px;
    z-index: 999;
    left: vw(500);
    top: vh(533);
    background-color: yellow;
  }
  .uevi2 {
    position: absolute;
    width: 100px;
    height: 20px;
    z-index: 999;
    left: vw(500);
    top: vh(433);
    background-color: yellow;
  }
  .uevi3 {
    position: absolute;
    width: 100px;
    height: 20px;
    z-index: 999;
    left: vw(500);
    top: vh(333);
    background-color: yellow;
  }
  .imgLeft2 {
    cursor: pointer;
    position: absolute;
    left: vw(3);
    top: vh(533);
    width: vh(6);
    height: vh(12);
    z-index: 999;
    transition: transform 0.5s ease;
  }
  .rotate {
    transform: rotate(180deg); /* 旋转 180 度 */
  }
  .imgLeft {
    cursor: pointer;
    z-index: 998;
    position: absolute;
    left: 0;
    top: vh(497);
    width: vh(13);
    height: vh(86);
  }
  .imgRight2 {
    cursor: pointer;
    z-index: 999;
    position: absolute;
    right: vw(3);
    top: vh(533);
    width: vh(6);
    height: vh(12);
    transition: transform 0.5s ease;
  }
  .imgRight {
    cursor: pointer;
    z-index: 999;
    position: absolute;
    right: 0;
    top: vh(497);
    width: vh(13);
    height: vh(86);
  }

  .hiddenLeft {
    transform: translateX(calc(-1 * (100% + 20vw)));
  }

  .hiddenRight {
    transform: translateX(calc(100% + 20vw));
  }
}
</style>
<style lang="scss">
body {
  overflow-x: hidden;
}
</style>
